<template>
  <div class="bar">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>{{ parentLabel }}</el-breadcrumb-item>
      <el-breadcrumb-item>
        <div style="font-weight: bold; color: #606266">{{ childLabel }}</div>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'

const props = defineProps({
  parentLabel: { type: String, defalut: 'label' },
  childLabel: { type: String, defalut: 'label' },
})

onMounted(() => {
  parentLabelHandle()
  childLabelHandle()
})

watch(
  () => props.parentLabel,
  () => parentLabelHandle()
)

watch(
  () => props.childLabel,
  () => childLabelHandle()
)

// 输入框标签
const parentLabel = ref<string>('Label')
const childLabel = ref<string>('Label')

const parentLabelHandle = () => {
  if (!props.parentLabel) return (parentLabel.value = 'Label')

  if (props.parentLabel.trim().length === 0) parentLabel.value = 'Label'
  else parentLabel.value = props.parentLabel
}

const childLabelHandle = () => {
  if (!props.childLabel) return (childLabel.value = 'Label')

  if (props.childLabel.trim().length === 0) childLabel.value = 'Label'
  else childLabel.value = props.childLabel
}
</script>

<style scoped lang="less">
.bar {
  padding: 10px;
  font-weight: bold;
  user-select: none;
}
</style>
